<template>
	<confirm-container title="插入图片" v-ref:modal>
		<div class="text-center" v-if="istoggle">
			<ul class="half clearfix">
				<li class="selected" data-from="1" @click="toggle">
						插入素材库图片
				</li>
				<li data-from="2" @click="toggle">
						插入本地图片											
				</li>
			</ul>			
		</div>
	  <div v-else>	  		  	
	  	<div v-if="islocal">
	  	   	<from-local v-ref:local></from-local>
	  	</div>
	  	<!-- 素材库 -->
	  	<div v-else>
					<div class="frame-items clearfix">										  
						<photo-item cover="3" v-for="(index,item) in webiArray">
							<div  v-if="item.url.trim()!=''" class="box img-responsive" :style="{ 'background-image': 'url(' + item.url + ')' }"></div>						
							<div  v-else class="placeholder-cover box img-responsive"></div>
							<h4>{{item.name}}</h4>
							<input type="radio" name="key" :value="index" class="radio" :checked="index === 0">														
						</photo-item>																																																																																
				 </div>	
				<app-page v-ref:page></app-page>					 				 
	  	</div>
	  </div>
	</confirm-container>	
</template>

<style>
ul.half li {
	float: left;
	border: solid 1px #383a3c;
	border-radius: 4px;
	-webkit-border-radius: 4px;		
	padding: 8px 16px;
	width: 220px;
	max-width: 50%;
	cursor: pointer;
}
ul.half li>a {
	color: inherit
}	
ul.half li.selected {
	color: #d81918 !important;
	border-color: #d81918 !important;
	position: relative;
	z-index: 20;	
}
ul.half li:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
}
ul.half li:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}	
ul.half {
	display: inline-block;
}
</style>

<script>
import fromLocal from './from-local.vue';	
var serialize = require('form-serialize');
import Page from './page.vue';	
	
export default {	
		props: {
			istoggle: {
    	  type: Boolean,
				twoWay: true
			},
			islocal: {
				type: Boolean,
				twoWay: true
			},
			webiArray: {
				type: Array
			}		
		},
		data: () => ({
			itemIndex: 0
		}),			
		components: {
			'from-local': fromLocal,
			'app-page': Page	
		},	
		methods: {
			init() {
				this.$refs.modal.$set("isWide",false)
	      this.$set("istoggle",true);	
				this.$set("islocal",false);
				this.$refs.modal.init();				
			},
			hide() {
				this.$refs.modal.hide();
			},
			toggle(e) {
				let dom = e.target;
				$(dom).addClass("selected").siblings().removeClass("selected");
				let islocal = ($(dom).data("from")== 2)?true: false;
				this.$set("islocal",islocal);						
			},
			getImages() {
			  let self = this;
				this.$nextTick(function(){
					let data = {
						type: 'image'
					}				
					data.aoData = this.$refs.page.setData();	
					this.$search({
							url: '/api/v1' + projectName_Url + '/wechat/media/query.html',
							data
						}).then( response => {	
							if (response) {
								let total = response.content.total;
								this.$refs.page.init(total); 							
								let content = response.content;
								let arr = content.mediaList;
								this.$set("webiArray",arr);
								this.$nextTick(function () {
										if(self.webiArray.length>0) {					
											this.$refs.modal.init();	
										} else {	
											let message = {
												title:"温馨提示",
												content: "暂无图片内容"
											}
											Midway.alert(message);
										}
								})
							}
						}, response => {

						});						
				})			
			}
			
		},
    events: {
			setCoverArg(result) {				
				//this.$dispatch("setItemCover",this.itemIndex,result.content.imgInf);
				this.$dispatch("insert",result.content.imgInf)
			},
			resolve() {
				if(this.istoggle) {
					this.$set("istoggle",false);
					if(this.islocal) {					
						this.$refs.modal.$set("isWide",true)
						this.$refs.modal.$set("title","插入本地图片")
					} else {
						this.getImages();
						this.$refs.modal.$set("isWide",true)
						this.$refs.modal.$set("title","插入素材库图片")
					}
				} else {
					if(this.islocal) {
						//新增本地图片
						//
						let result = this.$refs.local.handle(); 	
						if(result) {
							this.hide();
						}
					} else {
						//素材库								
						let key = $("input[name=key]:checked").val();	
						let arr = this.webiArray;
						let pushArr = arr.filter( (element,index) => {						
							 return (index == key)
						});											  
						//this.$dispatch("setItemCover",this.itemIndex,pushArr[0]);
						this.$dispatch("insert",pushArr[0])
						this.hide();
					}
		
				}
			},
			reject() {
				this.hide();
			},
			'pagination': 'getImages'						
		},
	  beforeCompile() {
			//this.getImages();
		},
	  ready() {
			
		}		
}
</script>